<template>
  <div id="browsePage">
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="90px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="浏览时间满"
          prop="stopSecond"
          class="small"
          label-width="90px"
        >
          <el-input-number
            v-model.number="ruleForm.stopSecond"
            size="mini"
            :min="1"
            :max="9999"
            :controls="false"
            :step="1"
            step-strictly
          ></el-input-number>
          秒，奖励
          <el-form-item label="" prop="getIntegral" class="small line">
            <el-input-number
              v-model.number="ruleForm.getIntegral"
              size="mini"
              :min="1"
              :max="9999"
              :controls="false"
              :step="1"
              step-strictly
            ></el-input-number>
            积分
          </el-form-item>
        </el-form-item>
        <el-form-item label="每日上限" prop="dailyLimit">
          <el-radio-group v-model="ruleForm.dailyLimit">
            <el-radio
              v-for="item in dailyLimitList"
              :key="item.dictValue"
              :label="item.dictValue"
            >
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
          <el-form-item
            label=""
            prop="everydayMax"
            class="small line margin0"
            v-if="ruleForm.dailyLimit === 'limited'"
          >
            <el-input-number
              v-model.number="ruleForm.everydayMax"
              size="mini"
              :min="1"
              :max="9999"
              :controls="false"
              :step="1"
              step-strictly
            ></el-input-number
            >次
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'browsePage',
  msg: '浏览页面',
  watch: {
    'ruleForm.everydayMax': {
      handler(newVal, oldVal) {
        if (newVal === 0) {
          //每日上限(0表示无上限)
          this.ruleForm.dailyLimit = 'unlimited'
        } else {
          this.ruleForm.dailyLimit = 'limited'
        }
      },
      deep: true
    },
    'ruleForm.dailyLimit': {
      handler(newVal, oldVal) {
        if (newVal === 'unlimited') {
          //每日上限(0表示无上限)
          this.ruleForm.everydayMax = 0
        }
      },
      deep: true
    }
  },
  data() {
    return {
      dailyLimitList: [
        { dictValue: 'unlimited', dictLabel: '不限' },
        { dictValue: 'limited', dictLabel: '限制' }
      ], // 每日上限
      ruleForm: {
        dailyLimit: 'unlimited', //每日上限
        everydayMax: 0, // 限制次数
        stopSecond: 0, // 浏览时间
        getIntegral: 0 // 奖励积分
      },
      rules: {
        dailyLimit: {
          required: true,
          message: '请选择每日上限',
          trigger: 'bluer'
        },
        everydayMax: {
          required: true,
          message: '每日上限不能为空',
          trigger: 'change',
          type: 'number'
        },
        stopSecond: {
          type: 'number',
          required: true,
          message: '浏览时间不能为空',
          trigger: 'change'
        },
        getIntegral: {
          type: 'number',
          required: true,
          message: '积分不能为空',
          trigger: 'change'
        }
      }
    }
  },
  mounted() {},
  methods: {
    //表单赋值
    setForm(formData) {
      let { everydayMax, getIntegral, stopSecond } = formData
      this.ruleForm.everydayMax = everydayMax
      this.ruleForm.getIntegral = getIntegral
      this.ruleForm.stopSecond = stopSecond
    },
    //表单校验 & 数据提交
    checkForm() {
      let ruleForm = { ...this.ruleForm }
      delete ruleForm.dailyLimit
      this.$emit('setComRuleForm', ruleForm)
      let _this = this
      return new Promise((resolve, reject) => {
        _this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            resolve(true)
          } else {
            reject(false)
          }
        })
      })
    }
  }
}
</script>

<style lang="less">
#browsePage {
  .line.el-form-item {
    display: inline-block;
    margin-left: 8px;
    margin-bottom: 0;
  }
}
</style>
